<template>
  <x-collapse expand :title="t['私有配置']">
    <a-form
      size="mini"
      :model="{}"
      :wrapper-col-props="{ span: 12, offset: 2 }"
      :label-col-props="{ span: 6 }"
    >
      <a-form-item v-if="currentShape.type !== 'd-barcode'" :label="t['文字']">
        <a-input v-model.lazy="currentShape.text" type="text" @change="onChange" />
      </a-form-item>
      <a-form-item :label="t['背景颜色']">
        <color-picker v-model="currentShape.bgcolor" @change="onChange"></color-picker>
      </a-form-item>
      <a-form-item :label="t['线条颜色']">
        <color-picker v-model="currentShape.textColor" @change="onChange"></color-picker>
      </a-form-item>
      <!-- <a-form-item :label="t['旋转']">
        <a-switch
          v-model="currentShape.rotate"
          checked-value="90"
          :checked-text="t['旋转']"
          :unchecked-text="t['正常']"
          unchecked-value="0"
          @change="rotate"
        ></a-switch>
      </a-form-item> -->

      <a-form-item :label="t['类型']">
        <a-select :options="typeOptions" v-model="currentShape.encoding"> </a-select>
      </a-form-item>
    </a-form>
  </x-collapse>
</template>

<script setup lang="ts">
import { fetchDictOptionsByName } from "@/api/selector/dict";
import { previewBarCode } from "@/api/service/utils";
import { currentShape } from "@/views/paint/modules/data/shapes";

const t = translate("公共模块");
onMounted(async () => {
  const data = await fetchDictOptionsByName("barcode");
  typeOptions.value = data;
});
const onChange = async () => {
  const { w, h, rotate } = currentShape.value;
  let width = rotate === 0 ? w : h;
  let height = rotate === 0 ? h : w;

  const barcode = await previewBarCode({
    bgcolor: currentShape.value.bgcolor,
    showText: currentShape.value.showText,
    text: currentShape.value.text,
    textColor: currentShape.value.textColor,
    w: width,
    h: height,
    margin: currentShape.value.margin,
    rotate: currentShape.value.rotate
  });
  currentShape.value.src = barcode.data;
};

const typeOptions = ref([
  {
    label: "CODE128",
    value: "CODE128"
  },
  {
    label: "EAN13",
    value: "EAN13"
  }
]);
const rotate = () => {
  onChange();
  [currentShape.value.w, currentShape.value.h] = [currentShape.value.h, currentShape.value.w];
};
</script>

<style lang="scss" scoped>
.text {
  input {
    border: 1px solid #eee;
    text-align: center;
    line-height: 24px;
    width: 100px;
    padding: 0;
  }
}
:deep(.arco-form-item) {
  display: flex;
}
</style>
